@extends('admin.common.base-master')

@section('html-head')
    <link href="{{url('css/jquery.form.css')}}" type="text/css" rel="stylesheet" />
    <script src="{{url('/js/lib/jquery.form.js')}}"></script>
    <style>
        .btn_add_classify{
            background: #31bcd3;margin-left:10px;height: 5px;width: 50px;color: white;text-align: center;padding:5px;border-radius:7px;box-shadow: 3px 2px 9px #888888;
        }
    </style>
    @include('UEditor::head')
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="#">问题管理</a>
            <em>></em>
            <a href="#">添加/修改问题</a>
        </div>
        <!-- cur-position end -->

        <div class="gg-step">
            <form  id="advform">
                <input type="hidden" name="id" id="q_id" value="@if($question){{$question->id}}@endif"/>

                <div class="gg-list">
                    <label class="tit">题目内容：</label>
                    <div class="cont">
                        <input class="gg-ipt" type="text" placeholder="请输入题目内容" name="title" id="title" value="@if($question){{$question->question}}@endif" /><cite id="title_re" class="required">*</cite>
                        <p class="text">可输入2-40个字符（一个汉字等于2个字符）</p>
                    </div>
                </div>

                <div class="gg-list">
                    <label class="tit">题目选项</label>
                    <div class="cont">
                        <label class="gg-radio" id="answer_info">
                        </label>
                        <label class="gg-radio">
                            @if($question)
                            <a href="{{route('Admin.Home.answerList')}}?qid={{$question->id}}" class="btn_add_classify" id="btn_add_classify">修改选项</a>
                            @else
                            <a href="javascript:;" class="btn_add_classify" id="btn_add_classify" onclick="upPop()">添加选项</a>
                            @endif
                        </label>
                    </div>
                </div>

                <div class="gg-list" data-id="ggwz">
                    <label class="tit">题目解析：</label>
                    <div class="cont">
                        <textarea placeholder="请输入题目解析内容" name="description" id="aa"></textarea>
                    </div>
                </div>

                <input type="hidden" id="answer_id" value="" />
            </form>
            <div class="gg-list" >
                <label class="tit">&nbsp;</label>
                <div class="cont" >
                    <a href="javascript:;" class="next-step" id="btn_send">提交</a>
                </div>
            </div>
        </div>
    </div>

    <div class="upPop-box">
        <div class="backdrop"></div>
        <div id="upPop" class="info-pop tixian">
            <a class="close" href="javascript:void(0);"></a>
            <h3>添加选项</h3>

            <div class="fill-list">
                <span class="fill-tit">选项编号：</span>
                <select id="select_num">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                    <option value="F">F</option>
                    <option value="G">G</option>
                </select>
            </div>

            <div class="fill-list">
                <span class="fill-tit">选项内容：</span>
                <input class="fill-ipt" type="text" name="answer" id="answer">
            </div>

            <div class="fill-list">
                <span class="fill-tit">是否答案：</span>
                <input type="radio" name="select_answer" id="is_right" value="1">是
                <input type="radio" name="select_answer" id="no_right" value="0" checked>否
            </div>

            <input type="hidden" name="id">
            <div class="fill-list">
                <span class="fill-tit">&nbsp;</span>
                <input class="fill-submit" type="button" id="subThisForm" value="提交">
            </div>
        </div>
    </div>

    <!-- content end -->
    <script>
        function upPop() {
            $('.upPop-box').upPop();
        }

        $(function() {

            <!-- 实例化编辑器 -->
            var ue = UE.getEditor('aa',{
                autoHeightEnabled: true,
                initialFrameHeight:400,
                initialFrameWidth:600,
                toolbars: [
                    ['fullscreen', 'undo','redo','|','fontsize','horizontal','|','simpleupload','insertvideo','removeformat'],
                    ['bold', 'italic', 'underline', 'forecolor', 'backcolor','|','indent','|','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight','|','insertunorderedlist', 'insertorderedlist','|', 'imagenone','imageleft','imageright','imagecenter','|','link']
                ]
            });

            @if($question)
           ue.ready(function() {
                ue.setContent('<?php echo $question->analyse ?>');
            });
            @endif

            $('#subThisForm').click(function () {
                var selectNum = $('#select_num option:selected').val();
                var answer    = $('#answer').val();
                var isRight   = $("input[name='select_answer']:checked").val();

                $.ajax({
                    url: "{{route('Api.Question.setAnswer')}}",
                    type: 'post',
                    dataType: 'json',
                    data: {
                        select_num: selectNum,
                        answer: answer,
                        is_right: isRight,
                    },
                    success: function (obj) {
                        if (obj.level == 'success') {
                            noty({
                                text: obj.message, type: obj.level, timeout: 600,
                                callback: {
                                    afterClose: function () {
                                        var answerIds = $('#answer_id').val();
                                        if(answerIds == ''){
                                            answerIds = obj.data.id;
                                        }else {
                                            answerIds = answerIds + ','+ obj.data.id;
                                        }
                                        $('#answer_id').val(answerIds);

                                        var htmlinfo = '';
                                        if(obj.data.is_right == 1){
                                            htmlinfo =  '<p>'+selectNum+'.'+obj.data.answer+'<span style="color: red">[答案]</span></p>';
                                        }else{
                                            htmlinfo = ' <p>'+selectNum+'.'+obj.data.answer+'</p>';
                                        }

                                        $('#answer_info').append(htmlinfo);
                                    }
                                }
                            });
                        } else {
                            noty({text: obj.message, type: obj.level, timeout: 600});
                        }
                    },
                    error: function (obj) {
                        console.log(obj);
                    }
                });
            });


            $('#btn_send').click(function () {
                var title     = $('#title').val();
                var content   = '';
                var answerIds = $('#answer_id').val();
                var qid = $('#q_id').val();

                ue.ready(function() {
                    content = ue.getContent();
                });

                $.ajax({
                    url:"{{route('Api.Question.setQuestion')}}",
                    type:'post',
                    dataType:'json',
                    data:{
                        question:title,
                        content:content,
                        answer_ids:answerIds,
                        id:qid
                    },
                    success:function (obj) {
                        if(obj.level == 'success'){
                            noty({text:obj.message,type:obj.level,timeout:600,
                                callback:{
                                    afterClose:function(){
                                        window.location.href="{{route('Admin.Home.questionList')}}";
                                    }
                                }
                            });
                        }else {
                            noty({text:obj.message,type:obj.level,timeout:600});
                        }
                    },
                    error:function (obj) {
                        console.log(obj);
                    }
                });
            });
        });
    </script>
@endsection